<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>我的订单</title>
    <link rel="stylesheet" href="../../../css/aui.css">
    <link rel="stylesheet" type="text/css" href="../../../css/aui-flex.css" />
    <!--<link rel="stylesheet" href="../../../css/main.css">-->
    <link rel="stylesheet" href="css/indent.css">
    <script type="text/javascript" src="../../../js/base.js"></script>

    <style>
        .aui-tab-item.aui-active {
            color:#000;
            border-bottom: 2px solid #f10b31;
        }
        @media screen and (max-width:321px){
            /*#tuiJianUser{*/
                /*width:5rem;*/

            /*}*/
        }
        @media screen and (min-width:321px) and (max-width:400px){
            /*#tuiJianUser{*/
                /*width:6rem;*/
            /*}*/
        }
    </style>

</head>
<body>
<!--<header class="aui-bar aui-bar-nav aui-bar-top">-->
    <!--<a class="aui-pull-left aui-btn goBack" >-->
        <!--<span class="aui-iconfont aui-icon-left"></span>-->
    <!--</a>-->
    <!--<div class="aui-title">我的订单</div>-->
<!--</header>-->

<div id="app" v-cloak>
    <div  class="aui-grid aui-margin-b-10">
        <div class="aui-tab" id="tab" style="position: fixed;width:100%;z-index: 99">
            <div class=" aui-tab-item  aui-active " @click="changeTab('all')">
                <div class="aui-grid-label">全部 </div>
            </div>
            <div class=" aui-tab-item " @click="changeTab('unpayed')">
                <div class="aui-grid-label">待付款</div>
            </div>
            <div class=" aui-tab-item " @click="changeTab('unshipped')">
                <div class="aui-grid-label">待发货</div>
            </div>
            <div class=" aui-tab-item " @click="changeTab('unchecked')">
                <div class="aui-grid-label">待收货</div>
            </div>
            <div class=" aui-tab-item " @click="changeTab('uncomment')">
                <div class="aui-grid-label">待评价</div>
            </div>
        </div>
    </div>
    <div  v-if="indentList.length>0"  v-for="indentInfo,index in indentList" style="margin-top:2.5rem;">
        <div  class="aui-grid">
            <div class=" aui-row aui-flex-col aui-flex-item-12 aui-margin-t-5 aui-padded-t-10 goodsList">
                <div class="aui-flex-item-6 aui-padded-l-10">
                    <div class="aui-grid-label aui-font-size-12" style="position: relative;height:2.25rem;margin-top:0">
                        <img src="../../../icon/logo.png" style="height:0.8rem; line-height: 0.8rem" alt="">
                        <span class="textCol">
                            小普微信商城专营
                         <i class="aui-iconfont aui-icon-right aui-font-size-12" style="position: absolute;top: 50%;margin-top: -0.75rem;left: 100%;"></i>
                        </span>

                    </div>
                </div>
                <div class="aui-flex-item-6 aui-padded-r-15" >
                    <div class="aui-font-size-12  aui-text-right fontColor">
                        {{getOrderStatus(indentInfo.order_status,indentInfo.comment_status)}}
                    </div>
                    <div class="aui-grid-label aui-font-size-12 aui-text-right textCol">订单号:{{indentInfo.order_sn}}</div>
                </div>
            </div>
            <div style="clear: both"></div>
            <div style="border-bottom: 1px solid #efefef; width:94%; margin:0 3%;"></div>
        </div>
        <div  class="aui-grid"  @click="goOrder_detail(index,status)" v-for="childrenIndentList,idx in indentInfo.children" >
            <div class="aui-row"  >
                <div class="aui-col-xs-3 aui-padded-l-15">
                    <img v-bind:src=" getImage(childrenIndentList.goods_image)" alt="" >
                </div>

                <div class="aui-col-xs-5 aui-padded-l-10 aui-text-left">
                    <div class="aui-grid-label aui-margin-0 aui-font-size-16 aui-margin-b-5 " style="width:120%">{{childrenIndentList.goods_name}}</div>
                    <div class="aui-grid-label aui-font-size-12  aui-margin-0  textCol ">{{getTypeAndColor(childrenIndentList.attrText,0)}}</div>
                    <div class="aui-grid-label aui-font-size-12  aui-margin-0  textCol">{{getTypeAndColor(childrenIndentList.attrText,1)}}</div>
                    <!--<div class="aui-grid-label aui-font-size-12 aui-text-danger aui-margin-0"><img src="../../../icon/2-1/fenxiang.png" style="height: 0.5rem" ></div>-->
                    <div v-if="childrenIndentList.refere_name && !tuijianrenInfo[index].isOneUser" class="aui-grid-label aui-margin-0 aui-font-size-12 aui-margin-b-5  textCol">推荐人:{{childrenIndentList.refere_name}}</div>

                </div>
                <div class="aui-col-xs-4  aui-text-right aui-padded-r-15" >
                    <div class="aui-font-size-12 ">￥{{childrenIndentList.shop_price}}</div>
                    <div class="aui-grid-label aui-font-size-12 aui-margin-b-5 textCol" style="text-decoration:line-through;margin-top:0">￥{{childrenIndentList.market_price
                        }}</div>
                    <!--<div class="aui-font-size-12 aui-margin-b-10 textCol">重量:0.020Kg</div>-->
                    <div class="aui-grid-label aui-font-size-12 textCol">X{{childrenIndentList.goods_number}}</div>
                </div>
            </div>
            <div style="border-bottom: 1px solid #efefef; width:94%; margin:0 3%;"></div>
        </div>
        <div class="aui-flex-col aui-flex-item-12  indentTime textCol">
            <div class=" aui-flex-item-4 aui-padded-l-10 aui-font-size-12" >
                <span>{{getDate(indentInfo.add_time+"000")}}</span>
            </div>
            <div class="aui-flex-item-8 aui-font-size-12 aui-text-right aui-padded-r-15">
                共<span>{{countNum[index]}}</span>件商品 合计:<span>￥{{countPrice[index]-indentInfo.coupon_money}}</span>(含运费:￥<span>0.00</span>)
            </div>
        </div>



    <div v-if="indentInfo.order_status == '0'" class="aui-flex-col aui-flex-item-12  aui-padded-b-15 aui-margin-b-10" style="background: #fff;">
        <div style=" width:94%;border-bottom: 1px solid #efefef; margin:0 3%;margin-bottom: 1rem;"></div>
        <div id="tuiJianUser"  v-if="tuijianrenInfo[index].isOneUser && tuijianrenInfo[index].oneUserName" class="aui-flex-item-6 aui-padded-l-10 aui-font-size-14 fontColor"
              style="height:1.8rem;line-height: 1.5rem;">
            推荐人: <span>{{tuijianrenInfo[index].oneUserName}}</span>
            <!--<img src="../../../icon/2-1/fenxiang.png" style="height: 1rem;padding:0.3rem 0 0 0.5rem">-->
        </div>
       <div  v-else class="aui-flex-item-6" ></div>
        <div class="aui-btn  aui-btn-outlined aui-flex-item-3 aui-margin-r-10  aui-btn-default " @click="cancelIndent(index)">取消订单</div>
        <div class="aui-btn  aui-btn-outlined aui-flex-item-2  fontColor borderColor" style="padding:0" v-on:click="goBuy(index)">去支付</div>
    </div>

    <div v-if="indentInfo.order_status == '1'" class="aui-flex-col aui-flex-item-12 aui-padded-b-15  aui-margin-b-10" style="background: #fff">
        <div style=" width:94%;border-bottom: 1px solid #efefef; margin:0 3%;margin-bottom: 1rem;"></div>
        <div  v-if="tuijianrenInfo[index].isOneUser && tuijianrenInfo[index].oneUserName"
              class="aui-flex-item-8  aui-padded-l-10 aui-font-size-14  fontColor"
              style="height:1.8rem;line-height: 1.5rem;">
            推荐人:   <span>{{tuijianrenInfo[index].oneUserName}}</span>
            <!--<img src="../../../icon/2-1/fenxiang.png" style="height: 1rem;padding:0.3rem 0 0 0.5rem">-->
        </div>
        <div  v-else class="aui-flex-item-8" ></div>
        <div class="aui-btn aui-btn-outlined aui-flex-item-3 aui-margin-l-15 borderColor" @click="gotiXiang(index)">提醒发货</div>

    </div>
    <div v-if="indentInfo.order_status == '3' && indentInfo.shipping_status=='2'" class="aui-flex-col aui-flex-item-12  aui-padded-b-15   aui-margin-b-10" style="background: #fff" v-on:click="goComment(index)">
        <div style=" width:94%;border-bottom: 1px solid #efefef; margin:0 3%;margin-bottom: 1rem;"></div>
        <div v-if="indentInfo.comment_status=='0'" class="aui-btn  aui-btn-outlined aui-flex-item-3 aui-flex-offset-8 borderColor">去评价</div>
    </div>

     <div v-if="indentInfo.order_status == '4' && indentInfo.shipping_status=='2'" class="aui-flex-col aui-flex-item-12  aui-padded-b-15   aui-margin-b-10" style="background: #fff"   @click="goOrder_detail(index,status)">
            <div style=" width:94%;border-bottom: 1px solid #efefef; margin:0 3%;margin-bottom: 1rem;"></div>
            <div v-if="indentInfo.comment_status=='1'" class="aui-btn  aui-btn-outlined aui-flex-item-4 aui-flex-offset-7 borderColor">查看订单详情</div>
     </div>

    <div v-if="indentInfo.order_status == '2' && indentInfo.shipping_status=='1'" class="aui-flex-col aui-flex-item-12  aui-padded-b-15  aui-margin-b-10" style="background: #fff">
        <div style=" width:94%;border-bottom: 1px solid #efefef; margin:0 3%;margin-bottom: 1rem;"></div>
        <div class="aui-btn  aui-btn-default aui-btn-outlined aui-flex-item-3 aui-flex-offset-2 aui-margin-r-10" @click="delIndent(index)">删除订单</div>
        <div class="aui-btn aui-btn-outlined aui-flex-item-3  borderColor" @click="goWuliu(index,'unchecked',indentInfo.order_id)">查看物流</div>
        <div class="aui-btn  aui-btn-outlined aui-flex-item-3 aui-margin-l-10 borderColor" v-on:click="goConfirmGoods(index)">确认收货</div>
    </div>

 </div>

    <div v-if="indentList==0 && navigator && navigator.onLine === true" style="height:100%;width:100%;margin-top:2.5rem;background:#fff">
        <div style="position:absolute;top:50%;left:50%;margin-top:-3rem;margin-left: -3rem">
            <img src="../../../icon/noIndent.png" alt="" style="width:6rem">
     </div>
        <div class="aui-text-center " style="position:absolute;top:50%;left:50%;margin-top:3.5rem;margin-left: -67px">还没有相关订单哦</div>
    </div>

    <div v-if="navigator && navigator.onLine === false" style="position:relative;" @click="goOnLine()">
        <div style="position:absolute;top:50%;left:50%;margin-top:9rem;margin-left: -3rem">
            <img src="../../../icon/duanwang.png" alt="" style="width:6rem">
            <div class="aui-text-center ">暂无网络</div>
        </div>
        <div  class="aui-text-center textCol" style="position:absolute;top:50%;left:50%;margin-top:16.5rem;margin-left: -86px">请连接网络后,点击刷新</div>
    </div>
</div>
<script type="text/javascript" src="../../../js/zepto.min.js"></script>
<script type="text/javascript" src="../../../js/vue.min.js"></script>
<script type="text/javascript" src="../../../js/api.js"></script>
<script type="text/javascript" src="../../../js/aui-tab.js"></script>
<script type="text/javascript" src="../../../js/aui-toast.js"></script>
<script type="text/javascript" src="../../../js/aui-dialog.js"></script>
<script type="text/javascript" src="../../../js/aui-list-swipe-backup.js"></script>
<script src="js/indent.js"></script>

<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script type="text/javascript" src="../../../js/weixin.js" ></script>

</body>
</html>